<template>
  <view>
    <view
      style="background: #fff; padding: 16rpx 0 0 0; position: fixed; width: 100%; z-index: 9"
      @touchmove.stop.prevent>
      <view
        style="
          margin: 0 32rpx;
          display: flex;
          font-size: 28rpx;
          height: 72rpx;
          line-height: 72rpx;
          background: #f5f5f5;
          border-radius: 8rpx;
        ">
        <view style="color: #222222; margin-left: 32rpx">
          <view style="display: flex" @click="onCity">
            <view>{{ cityStore().city.cityName }}</view>
            <image
              src="https://static.tospurfang.com/KOL/select_more.png"
              mode="scaleToFill"
              style="width: 32rpx; height: 32rpx; margin: auto 0rpx auto 8rpx" />
          </view>
        </view>
        <image
          src="https://static.tospurfang.com/bd/search.png"
          mode="scaleToFill"
          style="width: 28rpx; height: 30rpx; margin: 20rpx 0rpx 0 32rpx" />
        <input
          type="text"
          placeholder="请输入需要搜索的资产名称"
          v-model="inputValue"
          placeholder-style="color: #ADADAD"
          style="margin: 13rpx 12rpx; height: 40rpx; line-height: 40rpx; flex: 1" />
        <image
          v-if="inputValue"
          @click="onSearchClear"
          src="https://static.tospurfang.com/bd/clear.png"
          mode="scaleToFill"
          style="width: 32rpx; height: 32rpx; padding: 22rpx" />
      </view>
      <view style="line-height: 105rpx; height: 105rpx; display: flex; font-size: 28rpx; color: #222222">
        <view style="display: flex; flex: 1; justify-content: center" @click="onArea">
          <view :style="{ color: clickType == 1 ? '#EDB302' : '#222222' }">
            {{ area?.cityName || '区域' }}
          </view>
          <image
            :src="`https://static.tospurfang.com/asset/filter_${clickType == 1 ? 'up' : 'down'}.png`"
            mode="scaleToFill"
            style="width: 16rpx; height: 16rpx; margin: auto 0rpx auto 8rpx" />
        </view>
        <view style="display: flex; flex: 1; justify-content: center" @click="onType">
          <view :style="{ color: clickType == 2 ? '#EDB302' : '#222222' }">
            {{ type?.value || '物业类型' }}
          </view>
          <image
            :src="`https://static.tospurfang.com/asset/filter_${clickType == 2 ? 'up' : 'down'}.png`"
            mode="scaleToFill"
            style="width: 16rpx; height: 16rpx; margin: auto 0rpx auto 8rpx" />
        </view>
      </view>
    </view>

    <image
      @click="onReport"
      src="https://static.tospurfang.com/asset/report.png"
      mode="scaleToFill"
      style="position: fixed; right: 24rpx; bottom: 45rpx; width: 108rpx; height: 110rpx" />

    <view style="height: 177rpx"></view>
  </view>
  <area-modal ref="areaRef" v-model="area" @blur="onBlur" />
  <type-modal ref="typeRef" v-model="type" @blur="onBlur" />
  <city-modal ref="cityRef" @ok="onCityResult" />
</template>

<script setup>
  import { cityStore } from '@/biz/city'
  import cityModal from '@/com/city-modal.vue'
  import { ref, watch } from 'vue'
  import areaModal from './area-modal.vue'
  import typeModal from './type-modal.vue'

  const emits = defineEmits(['update'])
  const [areaRef, typeRef, cityRef] = [ref(), ref(), ref()]

  const [area, type, inputValue] = [ref(), ref(), ref()]
  const clickType = ref(0) // 1区域 2类型

  watch(
    () => cityStore().city,
    () => (area.value = null)
  )

  watch(
    () => ({
      areaName: area.value?.cityName || cityStore().city.cityName,
      propertyName: inputValue.value,
      propertyType: type.value?.key
    }),
    (n) => {
      console.log('change', n)
      emits('update', n)
    },
    { immediate: true }
  )

  function onCity() {
    cityRef.value.show()
    typeRef.value.hide()
    areaRef.value.hide()
    clickType.value = 0
  }

  function onSearchClear() {
    inputValue.value = null
  }

  function onReport() {
    uni.navigateTo({ url: '/pages/asset/report' })
  }

  function onCityResult(res) {
    cityStore().choice(res.prov, res.citys, res.city)
    cityRef.value.hide()
  }

  function onArea() {
    clickType.value = 1
    typeRef.value.hide()
    areaRef.value.show()
  }

  function onType() {
    clickType.value = 2
    areaRef.value.hide()
    typeRef.value.show()
  }

  function onBlur() {
    clickType.value = 0
  }
</script>
<style lang="scss" scoped></style>
